<template>
    <div class="article-wrap" @click="handleArticle">
        <div class="title">{{ title }}</div>
        <ul class="imgs">
            <li v-for="(item,index) in pictures" class="cell" :key="'ap'+index">
                <cover-image class="img" :src="item" :size="size" />
            </li>
        </ul>
        <div class="content">
            <div class="summary">{{ summary }}</div>
            <div class="count">{{ formatNumber(view) }}阅读</div>
        </div>
    </div>
</template>

<script>
import { useRouter } from 'vue-router'
import CoverImage from '@/components/CoverImage'
import { formatNumber } from '@/utils'
export default {
    name: 'PostArticle',
    components: {
        CoverImage
    },
    props: {
        id: {
            type: [Number, String]
        },
        title: {
            type: String
        },
        pictures: {
            type: Array
        },
        size: {
            type: String,
            default: '@702w_206h_1c'
        },
        summary: {
            type: String
        },
        view: {
            type: Number
        }
    },
    setup(props) {
        const router = useRouter()
        const handleArticle = () => {
            router.push({
                name: 'article',
                params: {
                    id: props.id
                }
            })            
        }
        return {
            handleArticle,
            formatNumber
        }
    }
}
</script>

<style lang="scss" coped>
.article-wrap{
    margin: {
      left: 10px;
      right: 10px;
      bottom: 10px;
    }
    background-color: $color-white;
    @include border1px(#e7e7e7, 1px, 4px);
    .title{
      font-size: 15px;
      padding: 10px 10px 8px;
    }
    .imgs{
      display: flex;
      height: 103px;
      overflow: hidden;
      .cell{
        flex: 1 1 30%;
        .img {
            padding-bottom: 206 / 702 * 100%;
        }
      }
    }
    .content {
      text-align: justify;
      padding: 8px 10px 10px;
    }
    .summary{
      font-size: 13px;
      color: $color-text-regular;
      @include max-lines(2);
    }
    .count{
      margin-top: 8px;
      font-size: 12px;
      color: $color-text-secondary;
    }
  }
</style>